<template>
	<view class="safe_box">
		<u-checkbox-group @change="checkboxGroupChange" wrap="true">
			<u-checkbox @change="checkboxChange" v-model="dataInfo.check" :name="dataInfo.title" shape="circle" class="goods_box">
				<view class="goods_item">
					<view class="sec_left">
						<image :src="dataInfo.prize_icon"></image>
						<view class="type">
							{{dataInfo.title}}
						</view>
					</view>
		
					<view class="sec_right">
						<view class="name">{{dataInfo.prize_name}}</view>
						<view class="price-num">
							<view class="price" style="color: #F46E13;">￥{{dataInfo.price}}</view>
							<view class="num" v-if="dataInfo.cat_id == 1">×{{dataInfo.pay_mode}}</view>
							<view class="num" v-else>×{{dataInfo.num}}</view>
						</view>
					</view>
		
				</view>
				<view class="time">
					该商品仅可在{{dataInfo.expire_time}}前，进行发货、赠送操 作，过期后将不可发货及赠送
				</view>
			</u-checkbox>
		</u-checkbox-group>
	</view>
</template>

<script>
	export default{
		props:{
			dataInfo: {
				type: Object,
				default() {
					return{};
				}
			},
			dataIndex:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//////console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// ////console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.safe_box{
		.goods_box {
			width: 710rpx;
			height: 390rpx;
			margin: 0 auto;
			position: relative;
			// background-color: #666;
			opacity: 0.9;
			padding: 46rpx 60rpx;
			margin-bottom: 27rpx;
		
			.goods_item {
				display: flex;
		
				.sec_left {
					width: 210rpx;
					height: 210rpx;
					background: #FFFFFF;
					border: 1rpx solid #DADADA;
					border-radius: 4rpx;
					position: relative;
					text-align: center;
		
					image {
						width: 148rpx;
						height: 118rpx;
						line-height: 210rpx;
						position: absolute;
						top: 24%;
						left: 14%;
					}
		
					.type {
						width: 120rpx;
						height: 43rpx;
						background: #006CFF;
						border-radius: 0 14rpx 25rpx 0;
						text-align: center;
						position: absolute;
						color: #fff;
						left: -1%;
						top: -1%;
						font-size: 22rpx;
					}
				}
		
				.sec_right {
					display: flex;
					flex-direction: column;
					margin-left: 44rpx;
		
		
		
					.name {
						width: 326rpx;
						height: 92rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #141414;
						line-height: 50rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
		
		
					}
		
					.time {
						font-size: 24rpx;
						color: #ff5123;
						margin-top: 15rpx;
					}
		
					.price-num {
						width: 326rpx;
						display: flex;
		
						.price {
							font-size: 40rpx;
							color: #21C8C1;
							margin-top: 46rpx;
						}
		
						.num {
							justify-content: flex-end;
							margin-left: auto;
							width: 45rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #141414;
							margin-top: 60rpx;
						}
					}
				}
		
			}
		
			.time {
				width: 581rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #939393;
				line-height: 36rpx;
				margin-top: 20rpx;
			}
		
		
		}
	}
	
</style>